<template>
  <van-dialog
    class="dialog"
    v-model="show"
    get-container="#app"
    @opened="onOpened"
    :show-confirm-button="false"
  >
    <div class="copy-content" :class="{ margin: $slots.default }">
      <template v-if="qrcode">
        <div class="tip">在微信长按👇识别二维码加我们</div>
        <long-touch-wechat
          image
          image-autosize
          :qrcode="qrcode"
          :desc="config.wechat_dialog_desc"
          @callback="onCopy"
        />
      </template>
      <template v-else>
        <div class="tip" v-if="autoCopy">👇添加下面微信号，打开微信加我们</div>
        <div class="tip" v-else>长按👇复制微信号,打开微信加我们</div>
        <long-touch-wechat
          :qrcode="wxno"
          :skip-wx="skipWx"
          :desc="config.wechat_dialog_desc"
          @callback="onCopy"
        />
      </template>
      <template v-if="!qrcode && autoCopy">
        <van-button
          type="primary"
          block
          icon="wechat"
          class="open-wx"
          @click="openWxClick"
        >
          微信已复制，点击打开微信
        </van-button>
      </template>
    </div>
    <div class="dialog-actions van-hairline--top no-select">
      <van-button class="cancel" size="large" @click="close"> 关闭 </van-button>
      <van-button
        class="confirm van-hairline--left"
        size="large"
        @click="onConfirm"
      >
        确认
      </van-button>
    </div>
  </van-dialog>
</template>
<script>
import { openWxApp } from "@/utils";
import { isWechat } from "@/utils/validate";
import longTouch from "@/directives/long-touch";
import clickOutside from "@/directives/click-outside";
import { copy } from "@/directives/clipboard";
import LongTouchWechat from "@/components/long-touch-wechat";

export default {
  components: {
    LongTouchWechat,
  },
  directives: {
    longTouch,
    clickOutside,
  },
  props: {
    config: {
      type: Object,
      default: () => ({}),
    },
    customer: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      isWechat,
      show: false,
      showCopy: false,
    };
  },
  computed: {
    autoCopy() {
      return this.config.copy_type == 1;
    },
    wxno() {
      return this.customer.contact;
    },
    qrcode() {
      return [4, 5].includes(this.customer.contact_type * 1)
        ? this.customer.image_url
        : "";
    },
    skipWx() {
      return this.config.enable_location_wechat == 1;
    },
  },
  methods: {
    onOpened() {
      if (this.autoCopy) {
        // this.$nextTick(() => {
        // 	setTimeout(() => {
        // 		this.autoClick(document.getElementById("wxno"));
        // 	}, 500);
        // });
      }
    },
    open() {
      this.show = true;
    },
    close() {
      this.show = false;
    },
    onConfirm(e) {
      // console.log(e);
      this.close();
      this.openWxClick(e);
    },
    clickOutside() {
      this.showCopy = false;
    },
    longTouchWx() {
      this.showCopy = true;
    },
    onCopy() {
      if (!this.qrcode && this.autoCopy) return;
      this.$emit("copywx");
    },
    openWxClick(ev) {
      copy(this.wxno, ev, (v) => {
        if (!v) return;
        this.onCopy();
        if (this.skipWx || this.autoCopy) {
          openWxApp();
        }
      });
    },
    autoClick(el) {
      if (document.all) {
        el.fireEvent("onclick");
      } else {
        var evt = document.createEvent("Events");
        evt.initEvent("click", true, true);
        el.dispatchEvent(evt);
      }
    },
    wxnoClick(ev) {
      copy(this.wxno, ev, (v) => {
        if (!v) return;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep {
  .van-dialog {
    &__content {
      user-select: none;

      text-align: center;
      max-height: 80vh;
      overflow: auto;
    }
  }
}
// 弹窗内容区域
.copy-content {
  padding: 0.5333rem;
  &.margin {
    margin-top: 0.3125rem;
  }
  .tip {
    font-size: 0.3733rem;
    color: #666;
    margin: 0 0 0.3125rem;
  }

  .wxno {
    margin: 0.2222rem 0;
    padding: 0.4222rem 0.2222rem;
    font-size: 0.44444rem;
    color: #f7763f;
    background: #faf6f5;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    user-select: all;
    white-space: pre-wrap;
    word-break: break-all;
    .select-range {
      background: #f1c0ac;
    }
  }
  .open-wx {
    margin-top: 0.5333rem;
  }
}
.dialog-actions {
  display: flex;
  overflow: hidden;
  .confirm,
  .cancel {
    flex: 1;
    margin: 0;
    border: 0;
    font-size: 0.41111rem;
  }
  .cancel,
  .cancel:active {
    color: #909399;
  }
  .confirm,
  .confirm:active {
    color: #ee0a24;
  }
}
</style>
